<template>
  <div>
    <el-button type="success" @click="dialogVisible = true">添加</el-button>
    <el-table
      :data="RoleData"
      style="width: 100%; margin-bottom: 20px"
      row-key="menuId"
      border
      lazy
      :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="roleId" label="角色ID"> </el-table-column>
      <el-table-column prop="roleName" label="角色名称"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" @click="Del(scope.row.roleId)"
            >删除</el-button
          >
          <el-button type="primary" @click="Upd(scope.row.roleId)"
            >修改</el-button
          >
          <el-button type="primary" @click="Allot()">分配权限</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="角色添加" :visible.sync="dialogVisible" width="50%">
      <role-add ref="roleAdd" @OnSave="SaveAdd"></role-add>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="Save">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="角色修改" :visible.sync="dialogVisibleUpdate" width="50%">
      <role-update
        ref="roleUpdate"
        :roleId="roleId"
        @RoleUpd="RoleUpd"
      ></role-update>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleUpdate = false">取 消</el-button>
        <el-button type="primary" @click="SaveUpdate">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="分配权限"
      :visible.sync="dialogVisibleRoleMenu"
      width="50%"
    >
      <role-menu></role-menu>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleRoleMenu = false">取 消</el-button>
        <el-button type="primary" @click="SaveUpdate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from "@/unit/request";
import RoleAdd from "../Role/RoleAdd.vue";
import RoleUpdate from "../Role/RoleUpdate.vue";
import RoleMenu from "../Role/RoleMenu.vue";
export default {
  components: { RoleAdd, RoleUpdate, RoleMenu },
  data() {
    return {
      dialogVisible: false,
      dialogVisibleUpdate: false,
      dialogVisibleRoleMenu: false,
      RoleData: [],
      roleId: "",
    };
  },

  methods: {
    //添加
    Save() {
      this.$refs.roleAdd.submitForm("ruleForm");
    },
    SaveAdd() {
      this.dialogVisible = false;
      this.RoleList();
    },

    //修改
    Upd(roleId) {
      this.dialogVisibleUpdate = true;
      this.roleId = roleId;
    },
    SaveUpdate() {
      this.$refs.roleUpdate.submitForm("ruleForm");
    },
    RoleUpd() {
      this.dialogVisibleUpdate = false;

      this.RoleList();
    },
    //分配权限
    Allot() {
      this.dialogVisibleRoleMenu = true;
    },
    Del(id) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios.delete("/Role/Delete?id=" + id).then((res) => {
            if (res.data.code == 1) {
              this.$message.success(res.data.message);

              this.RoleList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    RoleList() {
      axios.get("/Role/Query").then((res) => {
        this.RoleData = res.data.data;
      });
    },
  },

  created() {
    this.RoleList();
  },
};
</script>
<style >
</style>